/**
 * Created by huotaol on 2017/5/16.
 */
import React, {Component} from "react";
import PropTypes from "prop-types";
import {Image, Platform, ScrollView, StyleSheet, Text, TouchableOpacity, View} from "react-native";
import CustomStyle, {OS_IOS} from "../../../common/style/CustomStyle";
import {connect} from "react-redux";
import * as Url from "../../constant/Url";
import {parseGetParam, request} from "../../../common/util/RequestUtil";
import ScrollableTabView, {ScrollableTabBar} from "react-native-scrollable-tab-view";
import CarList from "../buyCar/component/CarList";
import DescriptionUI from "./DescriptionUI";
import {Actions} from "react-native-router-flux";
import * as Util from "../../../common/util/Util";

const TYPE_WORTH = 1;//精品
const TYPE_ON_SALE = 2;//特惠
const MAX = 20;
const URL_SHOP_CAR_LIST = Url.BASE_URL + '/shop/get_cars_by_shop';

class ShopDetail extends Component {
    static propTypes = {
        id: PropTypes.number,
    };

    // 构造
    constructor(props) {
        super(props);
        this._fetchShopDetail = this._fetchShopDetail.bind(this);
        this._fetWorth = this._fetWorth.bind(this);
        this._fetOnSale = this._fetOnSale.bind(this);
        this._fetAll = this._fetAll.bind(this);
        this._fetCarList = this._fetCarList.bind(this);
        this._getBaseParam = this._getBaseParam.bind(this);
        // 初始状态
        this.state = {
            data: {},
        };
    }

    componentDidMount() {
        this._fetchShopDetail();
    }

    render() {
        const {data} = this.state;
        if (Platform.OS === OS_IOS) {
            return this._renderContent(data);
        } else {
            return (
                <ScrollView>
                    {this._renderContent(data)}
                </ScrollView>
            );
        }
    }

    _renderContent(data) {
        return <View style={{flex: 1}}>
            <View style={{
                width: CustomStyle.screenWidth,
                height: CustomStyle.getActualSizeInVertical(300),
            }}>
                <Image source={{uri: 'http://g.chehangjia.cn/websys/m/img/def-shop-header.jpg'}}
                       resizeMode={'cover'}
                       style={{
                           width: CustomStyle.screenWidth,
                           height: CustomStyle.getActualSizeInVertical(300),
                       }}>
                    <Image source={{uri: data.coverImg}}
                           resizeMode={'cover'}
                           style={{
                               width: CustomStyle.screenWidth,
                               height: CustomStyle.getActualSizeInVertical(300),
                           }}/>
                </Image>
            </View>

            <ScrollableTabView
                renderTabBar={() => <ScrollableTabBar />}
                tabBarUnderlineStyle={{backgroundColor: '#ffc000'}}
                tabBarActiveTextColor='#ffc000'
                tabBarTextStyle={{fontSize: CustomStyle.getActualFontSize(30)}}
                tabBarInactiveTextColor="#d3cab0"
                tabBarBackgroundColor="white"
                style={{marginTop: CustomStyle.getActualSizeInVertical(104),}}
                initialPage={1}
            >
                <CarList style={[style.container]} tabLabel="精品" onFetch={this._fetWorth}/>
                <CarList style={[style.container]} tabLabel="全部" onFetch={this._fetAll}/>
                <CarList style={[style.container]} tabLabel="特惠" onFetch={this._fetOnSale}/>
                <DescriptionUI style={[style.container]} tabLabel="员工"/>
            </ScrollableTabView>
            <View style={{
                position: 'absolute',
                left: 0,
                top: 0,
                width: CustomStyle.screenWidth,
                height: CustomStyle.getActualSizeInVertical(334),
                justifyContent: 'flex-end',
            }}>
                <TouchableOpacity
                    style={[, {
                        flexDirection: 'row-reverse',
                        justifyContent: 'flex-start', alignItems: 'center',
                    }]}
                    onPress={() => {
                        Util.callPhone(data.phone)
                    }}
                >
                    <View style={{
                        backgroundColor: '#fffcee',
                        paddingLeft: CustomStyle.getActualSizeInHorizontal(20),
                        paddingRight: CustomStyle.getActualSizeInHorizontal(8),
                        paddingTop: CustomStyle.getActualSizeInVertical(8),
                        paddingBottom: CustomStyle.getActualSizeInVertical(8),
                        borderTopLeftRadius: CustomStyle.getActualSizeInHorizontal(24),
                        borderBottomLeftRadius: CustomStyle.getActualSizeInHorizontal(24),
                        marginLeft: CustomStyle.getActualSizeInHorizontal(-24),
                    }}>
                        <Text style={[CustomStyle.baseText, {
                            fontSize: CustomStyle.getActualFontSize(24),
                            color: '#8c7a44',
                        }]}>联系商家</Text>
                    </View>
                    <Image source={require('../../../img/shop/phone.png')}
                           resizeMode={'contain'}
                           style={{
                               width: CustomStyle.getActualSizeInHorizontal(70),
                               height: CustomStyle.getActualSizeInVertical(70),
                           }}/>

                </TouchableOpacity>

                <View style={{
                    height: CustomStyle.getActualSizeInVertical(68),
                    width: CustomStyle.getActualSizeInHorizontal(400),
                    borderRadius: CustomStyle.getActualSizeInHorizontal(34),
                    backgroundColor: '#ffc000',
                    justifyContent: 'center',
                    alignItems: 'center',
                    marginTop: CustomStyle.getActualSizeInVertical(16),
                    alignSelf: 'center',
                }}>
                    <Text style={[CustomStyle.baseText, {
                        fontSize: CustomStyle.getActualFontSize(30),
                        color: 'white',
                    }]}>{data.name}</Text>
                </View>
            </View>
            <TouchableOpacity
                style={[, {
                    position: 'absolute',
                    left: CustomStyle.getActualSizeInHorizontal(20),
                    top: CustomStyle.navBasePaddingTop + CustomStyle.getActualSizeInVertical(20),
                }]}
                onPress={() => {
                    Actions.pop();
                }}
            >
                <Image source={require('../../../img/cardetail/back.png')}
                       resizeMode={'contain'}
                       style={{
                           width: CustomStyle.getActualSizeInHorizontal(60),
                           height: CustomStyle.getActualSizeInVertical(60),
                       }}/>
            </TouchableOpacity>
        </View>
    }

    _fetchShopDetail() {
        const url = Url.BASE_URL + '/shop/get_shop_by_id';
        const param = new FormData();
        param.append('sid', this.props.id);
        request(url, 'post', param)
            .then(json => {
                console.log('_fetchShopDetail ' + JSON.stringify(json));
                this.setState({data: json.data});
            })
            .catch(err => {
                console.log('_fetchShopDetail ' + err);
            });
    }

    _fetCarList(url, param, type) {
        return request(url + parseGetParam(param), 'get')
            .then(json => {
                console.log('_fetCarList success ');
                const data = json.data;
                const imgPrefix = data.imgPrefix;
                const begin = data.begin;
                const total = data.total;
                if (type === TYPE_WORTH) {
                    this.worth = {begin, total};
                } else if (type === TYPE_ON_SALE) {
                    this.onSale = {begin, total};
                } else {
                    this.all = {begin, total};
                }
                const list = data.list;
                const row = list.map(item => Object.assign({}, item, {imgName: imgPrefix + item.imgName}));
                return {data: row, finish: total <= 0};
            });
    }

    _fetWorth(page = 1, option) {
        const param = this._getBaseParam();
        let begin = 0;
        let total = 0;
        if (page !== 1) {
            begin = this.worth.begin;
            total = this.worth.total;
        }
        param.begin = begin;
        param.total = total;
        param.type = TYPE_WORTH;
        console.log('_fetWorth ' + JSON.stringify(param));
        return this._fetCarList(URL_SHOP_CAR_LIST, param, TYPE_WORTH);
    }

    _fetAll(page = 1, option) {
        const param = this._getBaseParam();
        let begin = 0;
        let total = 0;
        if (page !== 1) {
            begin = this.all.begin;
            total = this.all.total;
        }
        param.begin = begin;
        param.total = total;
        console.log('_fetAll ' + JSON.stringify(param));
        return this._fetCarList(URL_SHOP_CAR_LIST, param);
    }

    _fetOnSale(page = 1, option) {
        const param = this._getBaseParam();
        let begin = 0;
        let total = 0;
        if (page !== 1) {
            begin = this.onSale.begin;
            total = this.onSale.total;
        }
        param.begin = begin;
        param.total = total;
        param.type = TYPE_ON_SALE;
        console.log('_fetOnSale ' + JSON.stringify(param));
        return this._fetCarList(URL_SHOP_CAR_LIST, param, TYPE_ON_SALE);
    }

    _getBaseParam() {
        return {
            sid: this.props.id,
            max: MAX,
        };
    }

}


const style = StyleSheet.create({
    container: {
        marginTop: CustomStyle.getActualSizeInVertical(10),
    },
});

export default connect()(ShopDetail);
